<template>
    <m-page class="page-background">
        <m-header></m-header>
        <!-- 信用卡卡片信息展示组件 支持滑动  待实现 -->
        <div class="payment_homepage__menu_back" ref="rampage">
            <div>
                <div class="payment_homepage__menu">
                    <div class="payment_homepage__menu-top">
                        <div class="payment_homepage__menu-top-item">
                            <img />
                            <p>银联标准卡账户</p>
                            <span>账户信息</span>
                        </div>
                    </div>
                    <div>
                        <div style="margin-left: 5%;margin-top: 5%;">
                            <span>1350.00</span><br/>
                            <span>本期剩余应还(元)</span>
                        </div>
                        <div class="div_top">
                            <div class="item-left">
                                <span>2300.00</span>
                                <span>当前总欠款(元)</span>
                            </div>
                            <div class="item-right">
                                <span>230.00</span>
                                <span>本期最低剩余还款(元)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 还款方式、还款金额、还款账户 -->
        <div class="mt20">
            <div class="mt20">
                <h2 class="credit_card_payment_homepage__record-title">还款方式</h2>
            </div>
            <div class="page-background">
                <div class="ynet-radio" :class="[ 'ynet-radio__flex']">
                    <div class="ynet-radio">
                        <label v-for="(option, index) in options" :key="index"
                            :for="`radio_${uuid}_${index}`" class="ynet-radio__content"
                            :class="currentValue == getValue(option) ? 'checked' : '' "
                            @click="choosePaymentMethod(option)">
                            <div class="ynet-radio__content__text">
                                {{getValue(option)}}
                                <input type="radio" class="ynet-radio__content__input"
                                    v-model="currentValue" :id="`radio_${uuid}_${index}`"
                                    :value="getKey(option)" />
                                <span class="ynet-radio-template2__content__input--checked">
                                    <span class="normal"></span>
                                <span class="selected"></span>
                                </span>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="mt20">
                    <h2 class="credit_card_payment_homepage__record-title">还款金额</h2>
                </div>
                <!-- <div>
                    <ynet-money-input placeholder="请输入还款金额" v-model="paymentAmount">
                    </ynet-money-input>
                </div> -->
                <div class="payment-cell" @click="choosePaymentAccount">
                    <span  class="ynet-cell__title">还款账户</span>
                    <p class="ynet-cell__value" v-if="repaymentAccountList.length > 0">
                        <span>
                            <slot>长行银行储蓄卡（尾号{{ paymentAccount }}）</slot>
                        </span>
                        <span class="multi-row">
                            <!-- 金额需要格式化显示 -->
                            <slot>可用余额：{{ balance }}元</slot>
                        </span>
                    </p>
                    <p class="ynet-cell__value2" v-else>
                        <span>
                            <slot>请绑定储蓄账户</slot>
                        </span>
                    </p>
                    <span class="ynet-cell__arrow"></span>
                </div>
            </div>
        </div>
        <!-- 立即还款按钮 -->
        <div class="ynet-btn-box mt20">
            <!-- <ynet-button @click-native="repaymentSubmit">立即还款</ynet-button> -->
        </div>
    </m-page>
</template>
<script>
    import BScroll from 'better-scroll';
    //import ynetMoneyInput from '@components/ynet_money_input';
    import { creditCardAccountQuery, queryCreditCard, returnCreditCard } from '../../request/index';
    export default {
        // components: {
        //     ynetMoneyInput
        // },
        data() {
            return {
                creditCardList: [], //信用卡列表
                repaymentAccountList: [], //还款账户列表
                entranceType: '0', //入口标识 0: 信用卡-点击信用卡还款宫格  1：信用卡-账单查询-点击“还款”按钮 2: 信用卡-账户信息-点击剩余应还金额
                creditCardInfo: {}, //信用卡卡片信息
                options: [
                    {
                        key: '0',
                        value: '本期剩余应还'
                    },
                    {
                        key: '1',
                        value: '本期最低剩余还款'
                    },
                    {
                        key: '2',
                        value: '当前总欠款'
                    }
                ],
                defaultValue: '0',
                currentValue: '0',
                uuid: Math.random()
                    .toString(36)
                    .substring(3, 8),
                paymentAmount: '1350.00', //还款金额
                paymentAccount: '6411', //还款账户
                balance: '3000.00' //余额
            };
        },
        computed: {},
        watch: {},
        methods: {
            // 判断进来的数据是对象还是字符串
            getValue(item) {
                return typeof item === 'object' ? item.value : item;
            },
            getKey(item) {
                return typeof item === 'object' ? item.key : item;
            },
            /**
             * Frame
             * 信用卡还款-信用卡详情查询
             * 不同入口调用不同的查询接口，后续联调接口时，需跟服务端确认
             * TODO
             */
            creditCardAccountQuery() {
                //接口上送参数
                let params = {
                    cardNo: '4092570000029101', //卡号
                    product: '' //卡类型
                };
                creditCardAccountQuery(params)
                    .then(res => {
                        console.log(res);
                        //获取信用卡卡片信息（欠款信息）
                        //this.creditCardInfo = res.creditCardInfo;
                        //获取还款账户信息
                        //this.getUserDepositCardList();
                    })
                    .catch(err => {
                        console.log('======creditCardAccountQuery=====');
                        console.log(err);
                    });
            },

            /**
             * Frame
             * 信用卡还款-根据卡号查询卡账单信息
             * 不同入口调用不同的查询接口，后续联调接口时，需跟服务端确认
             * TODO
             */
            queryCreditCard() {
                //接口上送参数
                let params = {};
                queryCreditCard(params)
                    .then(res => {
                        console.log(res);
                        //获取信用卡卡片信息（欠款信息）
                        this.creditCardInfo = res.creditCardInfo;
                        //获取还款账户信息
                        this.getUserDepositCardList();
                    })
                    .catch(err => {
                        console.log('======queryCreditCard=====');
                        console.log(err);
                    });
            },

            /**
             * Frame
             * 信用卡还款-还款方式选择
             * TODO
             */
            choosePaymentMethod(item) {
                console.log(item);
                //获取选择的还款方式
                this.currentValue = typeof item === 'object' ? item.key : item;
                //根据选择不同的还款方式，还款金额联动显示
                if (this.currentValue === '0') {
                    //获取本期剩余应还的金额，然后给还款金额字段赋值
                    this.paymentAmount = '1350.00';
                } else if (this.currentValue === '1') {
                    //获取本期最低剩余还款的金额，然后给还款金额字段赋值
                    this.paymentAmount = '230.00';
                } else {
                    //获取当前总欠款的金额，然后给还款金额字段赋值
                    this.paymentAmount = '2300.00';
                }
            },

            /**
             * Frame
             * 信用卡还款-选择还款账户
             * TODO
             */
            choosePaymentAccount() {
                console.log('选择还款账户');
            },

            /**
             * Frame
             * 获取信用卡列表
             * TODO
             */
            getUserCreditCardList() {
                // 调用原生JSAPI获取用户信用卡列表,目前尚未实现 bridge.getCreditCardList()
                app.api.getCreditCardList()
                    .then(({ res }) => {
                        console.log(res);
                        //获取储蓄卡列表
                        this.creditCardList = res.creditCardList;
                        // 判断用户是否有加挂信用卡
                        if (!this.creditCardList.length > 0) {
                            app.api.confirm('', '您暂未加挂我行信用卡，是否立即加挂！', { okButton: '是', cancelButton: '否' })
                                .then(res => {
                                    if (res.ok) {
                                        //跳转加挂信用卡页面
                                        bridge.pushWindow('ynet_credit/add_card/index.html');
                                    }
                                });
                        } else {
                            //查询信用卡账单信息
                            if (this.entranceType === '0') {
                                //信用卡-点击信用卡还款宫格进入
                                this.creditCardAccountQuery();
                            } else if (this.entranceType === '1') {
                                //信用卡-账单查询-点击“还款”按钮进入
                                this.queryCreditCard();
                            } else {
                                //信用卡-账户信息-点击剩余应还金额
                            }
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        app.api.alert('获取信用卡列表错误');
                    });
            },

            /**
             * Frame
             * 获取储蓄卡列表
             * TODO
             */
            getUserDepositCardList() {
                //获取用户信息
                app.api.getUserInfo()
                    .then(res => {
                        console.log(res);
                        //获取储蓄卡列表,根据
                        this.repaymentAccountList = res.userInfo.data.cardList;
                        //判断是否有还款账户
                        if (this.repaymentAccountList.length > 0) {
                            //判断是否有默认账户，有：还款账户默认显示默认账户；没有：任意一张已加挂的长沙银行储蓄
                        } else {
                            //没有加挂账户储蓄卡，还款账户显示“请绑定储蓄账户”
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        app.api.alert('获取用户信息错误');
                    });
            },
            /**
             * Frame
             * 立即还款
             * TODO
             */
            repaymentSubmit() {
                //1、必输字段合法性校验

                //2、调用原生JSAPI(取款密码控件)
                app.api.showPaymentPad({
                        title: '请输入取款密码',
                        subTitle: '',
                        contents: '信用卡还款',
                        money: this.paymentAmount.replace(/,/g, '')
                    })
                    .then(res => {
                        console.log(res, '888888');
                        this.encryptSM2BySM4(res.password);
                    });
            },

            /**
             * Frame
             * 加密因子
             * TODO
             */
            encryptSM2BySM4(pass) {
                app.api.encryptSM2BySM4({
                        sm2List: [pass]
                    })
                    .then(res => {
                        let obj = {
                            pwd: res.sm4List[0],
                            key: res.sm4Key
                        };
                        // 调用信用卡还款提交接口
                        this.returnCreditCard();
                    })
                    .catch(err => {
                        //bridge.hideLoading();
                        app.api.alert(err);
                    });
            },

            /**
             * Frame
             * 立即还款提交
             * TODO
             */
            returnCreditCard() {
                //接口上送参数
                let params = {};
                returnCreditCard(params)
                    .then(res => {
                        console.log(res);
                        //还款成功，跳转至信用卡结果页面
                        bridge.pushWindow('credit_card_payment/index/result.html');
                    })
                    .catch(err => {
                        console.log('======returnCreditCard=====');
                        console.log(err);
                    });
            },

            // 信用卡卡板信息滑动效果初始化
            _initScroll() {
                if (!this.scroll) {
                    console.log('0099999');
                    // let cliW = this.$refs.rampage.clientWidth; //需要获取当前屏幕的宽度，这样可以让我们没有超出内容部分的在横向滚动时不会滚动
                    // this.$refs.rampage.style.width = cliW + 'px';
                    this.scroll = new BScroll(this.$refs.rampage, {
                        click: true,
                        eventPassthrough: 'horizontal' //这是代表的横向滚动
                    });
                    console.log(this.scroll);
                } else {
                    this.scroll.refresh();
                }
            },
            tokens() {
                let params = {
                    numbers: '1'
                };
                //console.log('9999999',params);
                app.api.rpc('dbank.oncetokens', params)
                    .then(res => {
                        console.log(res, 789465465465465);
                        let token = res.tokenList[0].value;
                        console.log(9999999999, token);
                        let params2 = {
                            channelCode: 'EBANK',
                            osType: 'ADR',
                            appVersion: '2.1.5',
                            phoneId: 'ADR' + '787384738387787',
                            phoneNo: '15892598748',
                            cellid: '15892598748jjjuu',
                            verType: '0000',
                            chType: 'EBK',
                            smsTmp: 'SM02',
                            smsData: '',
                            original: '00',
                            isLogin: 'N',
                            utdid: ''
                        };
                        console.log(params.utdid, 'utdid');
                        app.api.rpc('directBank.sendSMSCode', params2, 2, '1')
                            .then(res => {
                                console.log(res, 'sendSMSCode');
                                //this.smsCode = res.SMSNO.replace(/[^0-9]/g, '');
                                //this.$refs.msgRef.startSendCode();
                                //alert(this.smsCode);
                                // this.verifySMSCode();
                            })
                            .catch(err => {
                                console.log(err, 999999999);
                                alert(err.errorMsg || err.showMsg);
                            });
                    })
                    .catch(err => {
                        console.log(888888888, err);
                        alert(err, 789465);
                    });
            }
        },
        mounted() {
            // this.$nextTick(() => {
            //     // 初始化
            //     this._initScroll();
            // });
        },
        created() {
            console.log('888888888');
            // 获取上个页面传过来的参数
            // console.log(bridge.getQueryParams());
            // if (bridge.getQueryParams()) {
            //     // 根据传过来的值判断是从哪个入口进入的，给入口标识字段赋对应的枚举值
            // }

            // 获取信用卡列表
            this.tokens();
        }
    };
</script>
<style lang='scss'>
    @import './index.scss';
</style>